<template>
	<view class="map-wrap">
	  <view class="map">
	    <map
	      id="map"
	      :longitude="longitude"
	      :latitude="latitude"
	      :markers="markers"
	      scale="16"
	      @markertap="handleMarkerTap"
	      show-location
	    >
	      <cover-image
	        src="/static/resources/center.png"
	        class="cover-image"
	        bindtap="handleLocationTap"
	      ></cover-image>
	    </map>
	  </view>
	  <view class="nav">
	    <view bindtap="handlePublishTap">
	      发布
	    </view>
	      <view>
	        <navigator url="/components/search/search" open-type="navigateTo">
	          搜索
	        </navigator>
	      </view>
	  </view>
	</view>
</template>
<script>
export default {
	created() {
		this.map = wx.createMapContext('map')
	},
	
	data() {
		return {
			longitude: 0,
			latitude: 0,
			markers: [],
		}
	},
	
	created() {
		this.loadData()
	},
	
	mounted() {
		wx.getLocation({
			type: 'wgs84',
			success: (res) => {
			  let {
				longitude,
				latitude
			  } = res

			  this.longitude = longitude
			  this.latitude = latitude
			}
		})
		
		this.loadData()
	},

	
	  methods: {
	    loadData() {
	  //     app.minipet.get({
	  //       success: (res) => {
	  //         const markers = res.data.map(value => {
	  //           let {
	  //             _id,
	  //             latitude,
	  //             longitude,
	  //             message,
	  //             type
	  //           } = value
	  
	  //           return {
	  //             id: _id,
	  //             latitude,
	  //             longitude,
	  //             title: message,
	  //             iconPath: `/resources/${type}.png`,
	  //             width: 40,
	  //             height: 40
	  //           }
	  //         })
	  
	  //         this.setData({
	  //           markers
	  //         })
	  //       }
	  //     })
	    },
	  
	    handleLocationTap() {
	      this.map.moveToLocation()
	    },
	  
	    handlePublishTap() {
	      wx.navigateTo({
	        url: '/components/publish/publish',
	      })
	    },
	  
	    handleMarkerTap(e) {
	      app.markerId = e.markerId
	
	      wx.navigateTo({
	        url: '/components/detail/detail'
	      })
	    }
	  }
}
</script>
<style lang="css">
.map-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.map {
  flex: 1;
}

.map-wrap #map {
  width: 100%;
  height: 100%;
}

.map-wrap #map .cover-image {
  width: 70rpx;
  height: 70rpx;
  position: absolute;
  bottom: 40rpx;
  left: 30rpx;
}


.map-wrap .nav {
  height: 88rpx;
  background-color: #52b9d2;
  display: flex;
}

.map-wrap .nav > view {
  flex: 1;
  text-align: center;
  line-height: 88rpx;
  color: #fff;
}

.map-wrap .nav > view:first-child {
  background-color: #f29a38;
}
</style>